import React from 'react';
import axios from 'axios';
/* 使用 React-redux 连接 React 与 Redux */
import {
  // connect,
  useDispatch,
  // Provider,
  useSelector
} from 'react-redux';
import { Button } from 'antd';
// import reduxStore from '../../../store/reduxStore'
import { ADD___USER } from '../../../store/redux/actionType';

const LearnRedux = () => {
  const dispatch = useDispatch();
  console.group('<=== LearnRedux Demo ===>');
  const storeData = useSelector(state => {
    // console.log('uhsadijfhiujashfiujsahfjhasjif', state)
    return state;
  });
  // console.log('reduxStore', reduxStore.getState() );
  // console.log('storeData   ', storeData)

  console.groupEnd();
  return (
    <div>
      {/* <Provider store={ reduxStore }> */}
      <h2>学习 123 Redux Demo</h2>
      <pre>{JSON.stringify(storeData)}</pre>

      <Button
        type='primary'
        size='small'
        onClick={() => {
          // 使用thunk中间件操作带副作用的action
          dispatch(thunkDis => {
            /*
                参数一：dispatch，来自于store.dispatch
                参数二：getState，来自于store.getState
                参数三：extra，来自于用户设置的额外参数
              */
            // console.log('thunk 中传递的dispatch', thunkDis)
            axios.get('/nestApi/user/getUser').then(res => {
              // console.log('请求到的测试数据', res)
              thunkDis({
                type: ADD___USER,
                userList: res.data.data
              });
            });
          });
        }}
      >
        Redux +
      </Button>
      {/* </Provider> */}
    </div>
  );
};
// const mapStateToProps = (state) => {
//   return {
//     redux__store: state
//   }
// }
// const mapDispatchToProps = (dispatch) => ({
//   add() {
//     dispatch({
//       type: INCREASE
//     })
//   }
// })

// export default connect(mapStateToProps, mapDispatchToProps)(LearnRedux)
export default LearnRedux;
